<template>
  <div id="app">
    <audio ref="audio" id="audio" preload="auto" :loop="isLoop"></audio>
    <!-- <audio src="http://m8.music.126.net/20190823214708/30fb57b15188f597331eb2d892a3eea4/ymusic/0f5b/510e/5658/810ae03376fd7b2c9a5ca28f1d586db7.mp3"></audio> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "App",
  data() {
    return {
      music: this.$refs.audio
    };
  },
  computed: {
    ...mapState("song_detail", ["song_detail_data"]),
    ...mapState("play_rule", ["play_rule_flag"]),
    ...mapState("play_rule", ["isLoop"])
  },
  mounted() {
    this.music = this.$refs.audio;
    this.music.addEventListener("ended", this.audioEnded, false); // 监听播放完成事件
  },
  methods: {
    // 随机播放逻辑
    randomSong(inIndex, c_list) {
      let rIndex = Math.floor(Math.random() * c_list.length);
      if (rIndex != inIndex) {
        this.$store
          .dispatch("song_check/getSongCheckData", {
            id: c_list[rIndex]
          })
          .then(value => {
            if (value) {
              this.$store
                .dispatch("song_detail/getSongDetailData", {
                  ids: c_list[rIndex]
                })
                .then(data => {
                  this.$store
                    .dispatch("song_url/getSongUrlData", {
                      id: c_list[rIndex],
                      br: "999000"
                    })
                    .then(data => {
                      localStorage.songIsPlayId = c_list[rIndex];
                      if (!this.music.src) {
                        this.music.src = data.data[0].url;
                      } else {
                        if (this.music.src == data.data[0].url) {
                          if (!this.music.paused) {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          } else {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              false
                            );
                          }
                        } else {
                          this.music.src = data.data[0].url;
                        }
                      }
                      let playPromise = this.music.play();
                      if (playPromise !== undefined) {
                        playPromise
                          .then(_ => {
                            this.music.play();
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          })
                          .catch(error => {});
                      }
                    });
                });
            }
          })
          .catch(data => {
            this.randomSong(rIndex, c_list);
          });
      }
    },
    // 下一首播放逻辑
    nextSong(inIndex, c_list) {
      let index = inIndex + 1;
      if (inIndex < c_list.length - 1) {
        this.$store
          .dispatch("song_check/getSongCheckData", {
            id: c_list[index]
          })
          .then(value => {
            if (value) {
              this.$store
                .dispatch("song_detail/getSongDetailData", {
                  ids: c_list[index]
                })
                .then(data => {
                  this.$store
                    .dispatch("song_url/getSongUrlData", {
                      id: c_list[index],
                      br: "999000"
                    })
                    .then(data => {
                      localStorage.songIsPlayId = c_list[inIndex + 1];
                      if (!this.music.src) {
                        this.music.src = data.data[0].url;
                      } else {
                        if (this.music.src == data.data[0].url) {
                          if (!this.music.paused) {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          } else {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              false
                            );
                          }
                        } else {
                          this.music.src = data.data[0].url;
                        }
                      }
                      let playPromise = this.music.play();
                      if (playPromise !== undefined) {
                        playPromise
                          .then(_ => {
                            this.music.play();
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          })
                          .catch(error => {});
                      }
                    });
                });
            }
          })
          .catch(data => {
            this.nextSong(index, c_list);
          });
      } else if (inIndex == c_list.length - 1) {
        this.music.currentTime = 0;
        this.music.pause();
        this.$store.commit("song_status/setPlayPause", false);
      }
    },
    // 播放完成
    audioEnded() {
      this.music.currentTime = 0;
      this.music.pause();
      this.$store.commit("song_status/setPlayPause", false);
      if (localStorage.song_list_id) {
        let list = JSON.parse(localStorage.song_list_id);
        let c_list = [];
        for (let key in list) {
          if (list.hasOwnProperty(key)) {
            let element = list[key];
            c_list.push(element.id);
          }
        }
        let inIndex = c_list.indexOf(this.song_detail_data.songs[0].id);
        if (inIndex != -1) {
          if (this.play_rule_flag == 2) {
            this.randomSong(inIndex, c_list);
          } else {
            this.nextSong(inIndex, c_list);
          }
        }
      }
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
